<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .createCode{
            user-select: none;
        }
        .right{
            font-size: 12px;
            color: green;
        }
        .error{
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <div class="form">
        <div class="input-group">
            <lable>用户名:</lable>
            <input type="text" class="user">
            <span class="user_tips"></span>
        </div>
        <div class="input-group">
            <lable>密&emsp;码:</lable>
            <input type="text" class="pwd">
            <span class="pwd_tips"></span>
        </div>
        <div class="input-group">
            <lable>手机号:</lable>
            <input type="text" class="phone">
            <span class="phone_tips"></span>
        </div>
        <div class="input-group">
            <lable>邮&emsp;箱:</lable>
            <input type="text" class="email">
            <span class="email_tips"></span>
        </div>
        <!-- <div class="input-group">
            <lable>验证码:</lable>
            <input type="text" class="code">
            <span class="createCode">xy1d</span>
            <span class="code_tips"></span>
        </div> -->

        <div class="input-group">
            <input type="submit" disabled class="btn" value="注册">
        </div>
    </div>
</body>
<script>
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头
    
    // 密码
    // 由数字 字母 _ 组成, 6-12位 
    // 密码强度
    // 如果 数字 大写字母 小写字母 _ 中只出现一种  弱   aaaaaa  111111 AAAAAA
    // 如果 数字 大写字母 小写字母 _ 中只出现两种  中   aaa111  AAA111 aaaAAA
    // 如果 数字 大写字母 小写字母 _ 中只出现三种  强   aaaAAA111  aaa111_  aaaAAA_
    // 如果 数字 大写字母 小写字母 _ 中只出现四种  超强 aaaAAA111_ 

    // 提升:  true + true + true + false = 3 

    // 确认密码 -> 密码成功的前提下,和密码保持一致

    // 验证码:  随机的验证码 和 用户输入的保持一直

</script>
<script>
    // 用户名
    // 由数字 字母 _ 组成, 6-12位, 切不能以数字开头

    // 按照从易到难的顺序:
    // a. 6-12位   /^.{6,12}$/
    // b. 切不能以数字开头   /^[^0-9]/
    // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符    /[\w]/  => 存在合法字符      /[^\w]/  => 是否存在合法字符    

    // 1. 建议失焦时分开验证

    // 2. 针对用户名 写两种:  1. 一步到位   2. 分开验证


  
    var userInp = document.getElementsByClassName("user")[0];
    var userTips = document.getElementsByClassName("user_tips")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdTips = document.getElementsByClassName("pwd_tips")[0];
    
    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneTips = document.getElementsByClassName("phone_tips")[0];

    var emailInp = document.getElementsByClassName("email")[0];
    var emailTips = document.getElementsByClassName("email_tips")[0];
    

    var btn = document.getElementsByClassName("btn")[0];
    console.log(userInp, userTips, btn);

    // 全局变量  => 记录校验的结果
    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;
    
    // 用户名 分步校验:
    // 按照从易到难的顺序:
    // a. 6-12位   /^.{6,12}$/
    // b. 切不能以数字开头   /^[^0-9]/
    // c. 由数字 字母 _ 组成 => 所有的字符都要在(数字 字母 _ )范围内 => 不在此范围内就是非法字符    /[\w]/  => 存在合法字符      /[^\w]/  => 是否存在合法字符   
    userInp.onchange = function(){
        var user = userInp.value;

        // 去除所有空格  => 将处理后的内容更新到输入框
        user = user.replace(/\s/g,"");
        userInp.value = user;

        isUserOk = false; // 每次校验之前  先将状态重置为false


        var lenReg = /^.{6,12}$/;  // 长度
        var startReg = /^[^0-9]/;  // 非数字开头

        // var combReg = /^\w{6,12}$/;  // 全部都是字母  数字 下划线组成 => 全都合法
        var illegalReg = /\W/;  // 是否存在非法字符  [^\w]

        // if(lenReg.test(user)){
        //     if(startReg.test(user)){
        //         if(!illegalReg.test(user)){
        //             userTips.textContent = "√";
        //             userTips.classList.remove("error");
        //             userTips.classList.add("right");
        //             isUserOk = true;
        //         }else{
        //             userTips.textContent = "用户名由字母  数字 下划线组成";
        //             userTips.classList.remove("right");
        //             userTips.classList.add("error");
        //         }
        //     }else{
        //         userTips.textContent = "用户名不能以数字开头";
        //         userTips.classList.remove("right");
        //         userTips.classList.add("error");
        //     }
        // }else{
        //     userTips.textContent = "用户名需要在6-12位之间";
        //     userTips.classList.remove("right");
        //     userTips.classList.add("error");
        // }


        if(!lenReg.test(user)){ // 长度有误
            userTips.textContent = "用户名需要在6-12位之间";
            userTips.classList.remove("right");
            userTips.classList.add("error");
        }else if(!startReg.test(user)){ // 开头有误
            userTips.textContent = "用户名不能以数字开头";
            userTips.classList.remove("right");
            userTips.classList.add("error");
        }else if(!!illegalReg.test(user)){  // 存在非法字符
            userTips.textContent = "用户名由字母  数字 下划线组成";
            userTips.classList.remove("right");
            userTips.classList.add("error");
        }else{ // 正确
            userTips.textContent = "√";
            userTips.classList.remove("error");
            userTips.classList.add("right");
            isUserOk = true;
        }
        isEnable();
    }


    pwdInp.onchange = function(){
        var pwd = pwdInp.value;

        isPwdOk = false;
        var pwdReg = /^\w{6,12}$/; 
        if(pwdReg.test(pwd)){

            // 密码强度校验  

            var isExistNum = /[0-9]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistSpe = /[_]/.test(pwd);

            var level = isExistNum + isExistBig + isExistSmall + isExistSpe;

            pwdTips.textContent = "密码强度:" + level;
            // pwdTips.style.color = "green";
            // pwdTips.style.fontSize = "12px";

            pwdTips.classList.remove("error");
            pwdTips.classList.add("right");

            isPwdOk = true;
        }else{
            pwdTips.textContent = "密码由数字 字母 _ 组成, 6-12位";
            // pwdTips.style.color = "red";
            // pwdTips.style.fontSize = "12px";

            pwdTips.classList.remove("right");
            pwdTips.classList.add("error");
        }

        isEnable();
    }


    phoneInp.onchange = function(){
        var phone = phoneInp.value;

        isPhoneOk = false;
        var phoneReg = /^1[3-9]\d{9}$/; 
        if(phoneReg.test(phone)){
            phoneTips.textContent = "√";
            phoneTips.classList.remove("error");
            phoneTips.classList.add("right");
            isPhoneOk = true;
        }else{
            phoneTips.textContent = "请输入正确的手机号";
            phoneTips.classList.remove("right");
            phoneTips.classList.add("error");
        }

        isEnable()
    }


    emailInp.onchange = function(){
        var email = emailInp.value;

        isEmailOk = false;
        
        // var emailReg = /^[a-zA-Z]\w{5,17}@(qq|163|126|sina|gmail)\.(com|cn)$/; 
        var emailReg = /^\w+@\w+\.\w+$/; 
        if(emailReg.test(email)){
            emailTips.textContent = "√";
            emailTips.classList.remove("error");
            emailTips.classList.add("right");
            isEmailOk = true;
        }else{
            emailTips.textContent = "请输入正确的邮箱";
            emailTips.classList.remove("right");
            emailTips.classList.add("error");
        }

        isEnable();
    }

    // 点击注册按钮 => 如果全都校验成功,就跳转页面
    btn.onclick = function(){
        console.log(isUserOk,isPwdOk,isPhoneOk,isEmailOk);
        if(isUserOk&&isPwdOk&&isPhoneOk&&isEmailOk){
            location.href = "https://www.baidu.com";
        }
    }

    function isEnable(){ 
        if(isUserOk&&isPwdOk&&isPhoneOk&&isEmailOk){
            btn.disabled = false;
        }else{
            btn.disabled = true;
        }
    }

  

</script>

</html>